<template>
	<view class="page-friend-request">
		<cl-topbar title="我的粉丝" :border="false">
			<!-- <view class="btn" slot="append">
				<cl-button type="text">清空</cl-button>
			</view> -->
		</cl-topbar>

		<!-- 好友请求列表 -->
		<view class="list">
			<view class="item" v-for="(item, index) in list" :key="index">
				<!-- 头像 -->
				<view class="avatar" @tap="toDetail(item.id)">
					<image lazy-load="true" :src="item.user_icon" mode="aspectFill" />
					<view class="man" v-if="item.sex == 1">
						<image src="@/static/icon/brief-icon-1.png" mode="aspectFill" />
					</view>

					<view class="woman" v-else-if="item.sex == 2">
						<image src="@/static/icon/brief-icon-2.png" mode="aspectFill" />
					</view>
				</view>

				<!-- 昵称，距离 -->
				<view class="group" @tap="toDetail(item.id)">
					<text class="name">{{ item.username }}</text>
					<text class="distance">{{ item.city }}</text>
				</view>

				<!-- 时间，按钮 -->
				<view class="right">
					<text class="time"></text>
					<template v-if="item.follow==1">
						<cl-button round @tap="cancleFollow(index)">取消关注</cl-button>
					</template>
					<template v-else>
						<cl-button round @tap="follow(index)">关注</cl-button>
					</template>
				</view>
			</view>
		</view>
		<load-more :loadText="loadText"></load-more>
	</view>
</template>

<script>
import loadMore from "../../components/load-more.vue";
export default {
	components:{
		loadMore,
	},
	data() {
		return {
			loadText: "加载中...",
			isLoading: false,
			hasMore: true,
			page: 1,
			list: [],
		};
	},
	onLoad() {
		this.getList();
	},
	methods:{
		// 前往详情
		toDetail(uid) {
			uni.navigateTo({
				url: "/pages/detail/index?uid=" + uid,
			});
		},
		async follow(index){
			let [err,res] = await this.$http.post('user/follower/follow',{
				uid: this.list[index].id
			});
			
			if(!this.$http.errorCheck(err,res)){
				return;
			}
			
			this.list[index].follow = 1;
		},
		async cancleFollow(index){
			console.log("vdvdvd");
			let [err,res] = await this.$http.post('user/follower/unFollow',{
				uid: this.list[index].id
			});
			
			if(!this.$http.errorCheck(err,res)){
				return;
			}
			
			this.list[index].follow = 0;
		},
		async getList(){
			if(!this.hasMore || this.isLoading){
				return;
			}
			
			this.isLoading = true;
			let [err,res] = await this.$http.get('user/fans/getFansList',{
				page: this.page
			});
			
			if(!this.$http.errorCheck(err,res)){
				return;
			}
			
			if(res.data.data.length == 0 || res.data.data.length < 10){
				this.hasMore = false;
				this.loadText = "没有更多了...";
			}
			
			this.page++;
			this.isLoading = false;
			
			this.list = this.list.concat(res.data.data);
		}
	}
};
</script>

<style lang="scss" scoped>
.page-friend-request {
	.cl-topbar {
		.btn {
			//#ifdef MP-WEIXIN
			margin-right: 100rpx;
			//#endif
		}
	}
	.list {
		padding: 30rpx;
		.item {
			display: flex;
			align-items: center;
			height: 102rpx;
			margin-bottom: 54rpx;
			.avatar {
				position: relative;
				width: 102rpx;
				height: 102rpx;
				margin-right: 30rpx;
				border-radius: 50%;
				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
				.man {
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					right: 0;
					bottom: 0;
					width: 40rpx;
					height: 40rpx;
					background-color: #58bcff;
					border-radius: 50%;
					image {
						width: 28rpx;
						height: 28rpx;
					}
				}
				.woman {
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					right: 0;
					bottom: 0;
					width: 40rpx;
					height: 40rpx;
					background-color: #ff5a70;
					border-radius: 50%;
					image {
						width: 28rpx;
						height: 28rpx;
					}
				}
			}
			.group {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 100%;
				flex: 1;
				.name {
					display: block;
					font-size: 32rpx;
					font-weight: 500;
					color: #282828;
				}
				.distance {
					font-size: 28rpx;
					font-weight: 400;
					color: #b1b1b1;
				}
			}
			.right {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 100%;
				.time {
					display: block;
					font-size: 22rpx;
					font-weight: 400;
					color: #b1b1b1;
				}
				/deep/.cl-button {
					width: 126rpx;
					height: 60rpx;
					border: 2rpx solid #ff5a70;
					&__text {
						font-size: 28rpx;
						font-weight: 400;
						color: #ff5a70;
					}
				}
			}
		}
	}
}
</style>
